<script setup>
useHead({
  title: '寓盟管家-智慧AI公寓管理平台|寓盟管家公寓管理系统'
})
</script>

<template>
  <div class="w-full">
    <!-- 轮播图 -->
    <HomeBanner />
    <!-- 使用企业 -->
    <HomeLinks />
    <!-- 应用场景 -->
    <HomeScene />
    <!-- 1000+功能 -->
    <HomeThousandPluse />
    <!-- 组织需求&个性化需求 -->
    <HomeTissueNeed />
    <!-- 城市地图 -->
    <HomeCityMap />
    <!-- 可靠的服务支撑体系 -->
    <section class="w-full mt-220px px-48">
      <h2 class="text-size-44px leading-62px text-center">可靠的服务支撑体系</h2>
      <div class="w-full mt-100px">
        <div class="flex justify-center">
          <div class="serve-card mr-27px">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">售前专家</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve1.png" alt="售前专家" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">专家咨询</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">个性化解决方案</p>
          </div>
          <div class="serve-card mr-27px">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">系统培训</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve2.png" alt="系统培训" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">全方位培训</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">快速掌握操作</p>
          </div>
          <div class="serve-card">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">帮助中心</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve3.png" alt="帮助中心" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">全面知识库</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">常见问题解答</p>
          </div>
        </div>
        <div class="flex justify-center mt-40px">
          <div class="serve-card mr-27px">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">7*24技术支持</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve4.png" alt="24技术支持" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">快速响应</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">及时解决问题</p>
          </div>
          <div class="serve-card mr-27px">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">运营优化</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve5.png" alt="运营优化" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">数据分析</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">实现业务优化</p>
          </div>
          <div class="serve-card">
            <div class="flex justify-between w-full items-center">
              <div class="text-size-28px">用户体验优化</div>
              <img class="w-80px h-80px" src="/public/images/home/serve/serve6.png" alt="用户体验优化" />
            </div>
            <p class="text-hex-777 text-size-20px font-normal leading-28px mt-24px">定期反馈</p>
            <p class="text-hex-777 text-size-20px font-normal leading-28px">改进产品设计</p>
          </div>
        </div>
      </div>
    </section>
    <div class="h-180px"></div>
  </div>
</template>

<style>
.serve-card {
  width: 382px;
  height: 210px;
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
  border-radius: 16px;
  border: 1px solid #f2f2f2;
  padding: 20px 30px;
  cursor: pointer;
}
@variants hover {
  .serve-card {
    transform: scale(1.06);
    transition: all 0.25s;
  }
}
</style>
